<template>
	<!--期间核查计划-->
	<el-dialog :visible.sync="isShow" @close="close" width="55%" class="examineDialog" :show-close='false' :closeOnClickModal='false'
	 append-to-body>
		<span slot="title" class="dialog-title">
		  	期间核查计划
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<el-form label-width="120px" :inline="false" class="demo-form-inline " :model="form" :rules="rules" ref="upKeepAddForm">
			<el-row>
				<el-col :span="23">
					<el-form-item label="名称:" prop="name">
						<el-input size="mini" v-model="form.name" placeholder="请输入计划名称"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="23">
					<el-form-item label="负责人:" prop="leader">
						<el-select filterable v-model="form.leader" placeholder="请选择" multiple size='mini' style="display: block;">
							<el-option v-for="item in EmployeeByLabs" :key="item.account" :label="item.name" :value="item.account" :disabled="item.disabled">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
      <el-row>
      	<el-col :span="23">
      		<el-form-item label="期间核查方法:" prop="request">
      			<el-input size="mini" v-model="form.request" placeholder="请输入期间核查方法"></el-input>
      		</el-form-item>
      	</el-col>
      </el-row>
			<el-row>
				<el-col :span="23">
					<el-form-item label="开始日期:" prop="startDate">
						<el-date-picker v-model="form.startDate" type="date" style="width:100%;" size="mini" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<!--<el-col :span="23" v-if="flag=='edit'">
					<el-form-item label="下次执行日期:" prop="nextDate">
						<el-date-picker v-model="form.nextDate" type="date" size="mini" disabled placeholder="选择日期" style="width:100%;" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
				</el-col>-->
			</el-row>
			<el-row>
				<el-col :span="23">
					<el-form-item label="循环间隔:" prop="times">
						<el-input  size="mini" v-model="form.times" @blur="decNumber(form.times)" :min="1" style="display: inline-block;width: 80px;" oninput="this.value=this.value.replace(/[^0-9]+/,'');"></el-input>

						<el-select v-model="form.spaceTime" placeholder="请选择" size="mini" style="display: inline-block;width: calc(100% - 85px);">

							<el-option label="周" value="周"></el-option>
							<el-option label="月" value="月"></el-option>
							<el-option label="年" value="年"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button class="penalButton" type="primary" size="mini" @click="submit(0)" :disabled="!isRepeat">确定</el-button>
				<el-button class="penalButton" size="mini" @click="close">取消</el-button>
	  </span>
	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		props: {
			equipmentId: String,
			examineEditData: Object,
			flag: String
		},
		data() {
			return {
				isShow: true,
				// EmployeeByLabs: [],
				keeper: [],
				form: {
					equipment: '',
					maintainType: "MA03",
					name: '',
					startDate: '',
					nextDate: '',
					cycle: '',
					spaceTime: '周',
					times: '',
					leader: [],
					quartzBean: {
						type: "2",
						jobGroup: "equipment",
						status: "1"
					},
          request:'',
				},
				rules: {
					name: [{ required: true, type: 'string', message: '请填写名称', trigger: 'blur' },],
					startDate: [{ required: true, type: 'string', message: '请选择日期', trigger: 'change' },],
					times:[{ required: true,  message: '请填写', trigger: 'blur' },],
					//    	endDate:[{required: true,type: 'string', message: '请选择', trigger: 'blur' },],
					leader:[{required: true,message: '请选择负责人', trigger: 'change' },],
				},
				isRepeat:true,
			}
		},
		created() {
			// this.getEmployeeByGroup()
		},
		mounted() {
			this.form.equipment = this.equipmentId
			if (Object.keys(this.examineEditData).length !== 0) {
				this.form.name = this.examineEditData.name
				this.form.startDate = this.examineEditData.startDate
				this.form.nextDate = this.examineEditData.nextDate
				this.form.cycle = this.examineEditData.cycle
				this.form.spaceTime = this.examineEditData.spaceTime
				this.form.times = this.examineEditData.times
        this.form.request = this.examineEditData.request
				// this.form.leader = this.examineEditData.leader
				// this.keeper = this.examineEditData.leader.split(',')
				this.form.leader = this.examineEditData.leader.split(',')
			}
		},
		computed: {
			...mapState(['EmployeeByLabs'])
		},
		methods: {
			// 验证保留位数只能为整数
			decNumber(val) {
				var reg = /^[1-9]\d*$/;
				var isInt = reg.test(Number(val));
				if (!isInt) {
					this.form.times = "";
				}
			},
			//	h获取责任人/getEmployeeByGroup.htm
			getEmployeeByGroup() {
				let params = { equipment: this.equipmentId }
				let url = 'resource/getEmployeeByGroup.htm'
				this.$http({ apiUrl: url, method: 'post', params: params, isJson: false }).then(res => { if (res.code == 0) { this.EmployeeByLabs = res.data } })
			},
			close() {
				this.$refs.upKeepAddForm.resetFields();
				this.$parent.examineEditData = {}
				this.$parent.examineShow = false;
				this.isRepeat = true;
			},
			submit(submitType) {

				this.$refs.upKeepAddForm.validate((valid) => {
					if (valid) {
						let url
						var data = JSON.parse(JSON.stringify(this.form))
						if (Object.keys(this.examineEditData).length !== 0) {
							url = 'resource/updateEquipPlan.htm'
							// this.form.id = this.examineEditData.id
							data.id = this.examineEditData.id
						} else {
							url = 'resource/addEquipPlan.htm'
						}
						let cycleObj = { '周': 'weekCycle', '月': 'monthCycle', '年': 'yearCycle' };
						let cycle = cycleObj[this.form.spaceTime];
						// this.form[cycle] = this.form.times
						// this.form.submitType = submitType;
						// this.form.leader = this.keeper.join(',');
						data[cycle] = data.times
						data.submitType = submitType;
						data.leader = data.leader.join(',');

						this.isRepeat = false;
						this.$http({
							apiUrl: url,
							method: 'post',
							params: data,
						}).then(res => {
							this.isRepeat = true;
							if (res.code == 0) {
								this.$message({
									showClose: true,
									message: '操作成功',
									type: 'success'
								})
								this.close()
								this.$parent.init()
							}
						})
					} else {
						this.isRepeat = true;
						return false
					}
				})
			}
		}
	}

</script>
<style>
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.examineDialog .el-dialog {
		height: 70%;
	}

	.examineDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 15px;
	}
	.examineDialog .form .el-form-item {
		margin-bottom: 15px;
	}
</style>
